<template>
    <div>
        <el-row style="margin-top:2rem;" :gutter="20">
            <el-col :span="6">
                <img src="../assets/mall.png" style="height:3rem" @click="skip_index">
            </el-col>
            <el-col :span="18">
                <el-row style="margin-top:5px;">
                    <el-col :span="14">
                        <slot name="title" />
                    </el-col>
                    <el-col :span="3" :offset="3">
                        <p>
                            <el-link v-if="$store.state.user!=null" @click="skip_personalcenter">
                                {{$store.state.user.username}}</el-link>
                        </p>
                    </el-col>
                    <el-col :span="2">
                        <p>
                            <el-link @click="layout">退出</el-link>
                        </p>
                    </el-col>
                    <el-col :span="1">
                        <p>
                            <el-badge :value="commodity_num" class="item">
                                <el-link icon="el-icon-shopping-cart-2" @click="skip_cars"
                                    style="margin-left:2rem;font-size:20px;"></el-link>
                            </el-badge>
                        </p>
                    </el-col>
                </el-row>
            </el-col>

        </el-row>
    </div>
</template>


<style scoped>

</style>

<script>
    export default {
        data: () => {
            return {
                commodity_num: 0
            }
        },
        methods: {
            skip_index() {
                this.$router.push("index")
            },
            skip_personalcenter() {
                this.$router.push("personalcenter")
            },
            layout() {
                localStorage.removeItem('token')
                localStorage.removeItem('userId')
                this.$router.push("login")
            },
            getshoppingcartnum() {
                let token = localStorage.getItem('token')
                if (token != null) {
                    this.$axios.get(this.$store.state.base_url + '/shoppingcart/?token=' + token).then(data => {
                        let shoppingcartlist = data.data.data
                        let totol_num = 0
                        for (const iterator of shoppingcartlist) {
                            console.log(iterator)
                            totol_num += iterator.num
                        }
                        this.commodity_num = totol_num
                    })
                }

            },
            skip_cars() {
                this.$router.push("cars")
            },
        },
        mounted(){
            this.$store.dispatch('getUser')
            if (localStorage.getItem('token') == null) {
                this.$router.push("login")
                
            }
            this.getshoppingcartnum()
        }
    }
</script>